<template>
    <div class="popup-imgUp" v-show="isShow">

        <div class="content">
            <div class="top">
                <p @click="closeBtnClick" ><a href="javascript:;">x</a></p>
            </div>
            <p class="Note">最多上传<strong>1</strong>个附件,单文件最大<strong>4M</strong>,类型<strong>jpg,png,gif,jpeg</strong></p>
            <div class="file">
                <button class="imgUp-btn">+选择上传文件</button>
                <input type="file" class="filepath" ref="imgfile"  @change="changepic($event)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                  <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
            </div>
            
            <div class="img-list">
                <p>图片</p>

                <div class="img">
                    
                    <img ref="showImg">
                    <p v-show="deleteShow" @click="deleteImg"><a href="javascript:;">删除</a></p>
                </div>

                <input type="button" value="保存" @click="sava">
                <input type="button" value="取消" @click="closeBtnClick">
            </div>
        </div>

    </div>
</template>

<script>
//图片上传组件

export default {
    name:'popup-imgUp',
    data(){
        return{
            deleteShow:false,
            img_url:''
        }
    },
    props:{
        isShow:{
            type:[Boolean],
            default:false
        },
        name:{
            type:String
        }
    },
    methods:{
        changepic(e){
            let reads = new FileReader()
            let imgUrl = this.$refs.imgfile.files[0]
            reads.readAsDataURL(imgUrl)//readAsDataURL 方法会读取指定的 Blob 或 File 对象,并触发 loadend 事件，
            let that = this
            //arget 事件属性可返回事件的目标节点
            reads.onload=function(e){ 
                let url = e.target.result
                that.img_url = url
                that.$refs['showImg'].setAttribute('src',url)
                that.deleteShow = !that.deleteShow
            } 
        },
        closeBtnClick(){
            this.$refs.showImg.setAttribute('src','')
            this.$emit('changeshow',false)//发送给父组件
            this.deleteShow = false
        },
        deleteImg(){
            this.$refs.showImg.setAttribute('src','')
            this.deleteShow = false
        },
        //保存图片
        sava(){
            if(this.img_url === ''){
                alert('还未选择文件')
            }else{
                this.$emit('changeshow',false)//发送给父组件
                this.$emit('getimgurl',this.img_url)//发送给父组件
                this.deleteShow = false
            }
            
        }
    }
}
</script>

<style scoped>
.popup-imgUp{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 999999;
    left: 0;
    top: 0;
}
.content{
    position: fixed;
    width: 500px;
    height: 450px;
    background-color: #FFFFFF;
    left: 30%;
    top: 8%;
    box-shadow: #CCCCCC 0px 0px 10px inset;
    z-index: 9;
    padding: 10px;
}
.content .top{
    height: 40px;
    background-color: #EDF5FB;
    border-bottom:1px solid  #C8DDE9;
}
.content .top p a{
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background: #FFFFFF;
    float: right;
    margin-top: 8px;
    margin-right: 15px;
    color: #C4C4C4;
}
.content .top p a:hover{
    box-shadow: #575757 0px 0px 5px;
    color: #494949;
}
.content .Note{
    font-size: 14px;
    line-height: 30px;
}
.content .Note strong{
    color: #0099FF;
}
.content .imgUp-btn{
    padding: 5px 10px;
    background: #494949;
    color: #FFFFFF;
    font-weight: bold;
}
.content .file{
    position: relative;
}
.content .file .filepath{
    position: absolute;
    width: 112px;
    height: 31px;
    overflow: hidden;
    left: 0;
    z-index: 1;
    opacity: 0;
}
.content .img-list p{
    text-align: center;
    font-weight: bold;
    color: #A2C4D6;
    line-height: 50px;
}
.content .img-list .img{
    height: 220px;
    border: 1px solid #A2C4D6;
}
.content .img-list .img img{
    display: block;
    max-height: 180px;
    max-width: 350px;
    margin: 0 auto;
}
.content .img-list .img p a{
    color: #EF4F4A;
}
.content .img-list input[type=button]{
    padding: 5px 30px;
    margin: 10px 10px;
    float: right;
    font-weight: bold;
}
</style>